import React , { useState }from 'react';
import notice from '@assets/images/home/notice.png';
import Swiper from '@components/swiper/index.jsx';
import work_into_left from './images/work_into_left.png';
import work_into_right from './images/work_into_right.png';
import './home.css';
const STYLE_WORK_INTO = {
  "width":"346px",
  "marginLeft": "16px"
}

function Home() {
  return (
      <div className="home_box">
          <div className="notice_box">
            <img src={notice} alt="notice" className="notice_image"/>
            <div className="notice_title">
              第三届江苏省科协青年会员创新创业大赛决赛正式启动
            </div>
          </div>

          <div className="content_box">
            <div className="content_item">
              <Swiper/>
            </div>
            <div className="content_item"  style={{
                "marginLeft": "16px"
              }}>
              <div className="content_item_title">
                <div className="item_title_box">
                  要闻快递
                </div>
                <div className="item_more">
                  更多>>
                </div>
              </div>
              <ul className="content_item_list">
                <li>
                  <span className="item_text">中国机器人制造商正在影响世界</span>
                  <span className="item_date">09-26</span>
                </li>
                <li>
                  <span className="item_text">中国机器人制造商正在影响世界</span>
                  <span className="item_date">09-26</span>
                </li>
                <li>
                  <span className="item_text">中国机器人制造商正在影响世界</span>
                  <span className="item_date">09-26</span>
                </li>
                <li>
                  <span className="item_text">中国机器人制造商正在影响世界</span>
                  <span className="item_date">09-26</span>
                </li>
                <li>
                  <span className="item_text">中国机器人制造商正在影响世界</span>
                  <span className="item_date">09-26</span>
                </li>
                <li>
                  <span className="item_text">中国机器人制造商正在影响世界</span>
                  <span className="item_date">09-26</span>
                </li>
                <li>
                  <span className="item_text">中国机器人制造商正在影响世界</span>
                  <span className="item_date">09-26</span>
                </li>
                <li>
                  <span className="item_text">中国机器人制造商正在影响世界</span>
                  <span className="item_date">09-26</span>
                </li>
              </ul>
            </div>
            <div className="content_item" style={STYLE_WORK_INTO}>
                <div className="work_item_title">
                  <img src={work_into_left} alt="work_into_left"/>
                  <div>走进学会</div>
                  <img src={work_into_right} alt="work_into_right"/>
                </div>
                <div className="exam_entry"></div>
                <div className="work_into_content">
                  <ul>
                    <li>
                      <div>学会简介</div>
                    </li>
                    <li>
                      <div>入会简介</div>
                    </li>
                    <li>
                      <div>技术讲座</div>
                    </li>
                    <li>
                      <div>课题研究</div>
                    </li>
                  </ul>
                  <ul style={{
                    "marginTop":"15px"
                  }}>
                    <li>
                      <div>驻会领导</div>
                    </li>
                    <li>
                      <div>学会章程</div>
                    </li>
                    <li>
                      <div>会员代表</div>
                    </li>
                    <li>
                      <div>组织结构</div>
                    </li>
                  </ul>
                </div>
            </div>
          </div>

      </div>
  );
}

export default Home;
